<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>d3学习第一天</title>
    <script src="../d3.js"></script>
</head>
<body>

<script>
    function SimpleWidget(spec) {
        var instance = {};
        var headline, description;

        instance.render = function () {
            var div = d3.select('body').append('div');
            div.append('h3').text(headline);
            div.attr('class', 'box')
                    .attr('style', 'color:' + spec.color)
                    .append('p')
                    .text(headline);
            return instance;
        }

        instance.headline = function (h) {
            if (!arguments.length) h;
            headline = h;
            return instance;
        }

        instance.description = function (d) {
            if (!arguments.length) d;
            description = d;
            return instance;
        }

        return instance;

    }

    var widget = new SimpleWidget({color: '#6495ed'})
            .headline('Simple Widget')
            .description('This is a simple widget demonstrating functional javascript.');
    widget.render();
    console.log(widget.headline())
</script>

</body>
</html>